<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Visualization: BioHeatMap - A Heatmap for Gene Expression and Other Data</title>

    <!--<script src="http://code.google.com/js/codesite.pack.01312008.js" type="text/javascript"></script>-->
    <link href="http://code.google.com/css/codesite.pack.01312008.css" type="text/css" rel="stylesheet"/>


    <!--[if IE]><link rel="stylesheet" type="text/css" href="/css/iehacks.css" /><![endif]-->
    <!--<link type="text/css" rel="stylesheet" href="docs/table.css">-->
</head>
<body class="gc-documentation">

<div id="gc-container">
<a name="top"></a>

<div id="codesiteContent">

<a name="gc-topnav-anchor"></a>

<div id="gc-topnav">
    <h1>HeatMap</h1>
    <ul id="docs" class="gc-topnav-tabs">
        <li id="home_link">
            <a href="http://systemsbiology.org/" title="Institute for Systems Biology">Home</a>
        </li>

        <li id="docs_link">
            <a href="http://groups.google.com/group/systemsbiology-visualizations/web/visualizations-summary" class="selected"
               title="Systems Biology Visualizations Documentation">Docs</a>
        </li>

        <li id="faq_link">
            <a href="http://systemsbiology-visualizations.googlegroups.com/web/bioheatmap_examples.html" title="">Examples</a>
        </li>

        <li id="code_link">
            <a href="http://code.google.com/p/systemsbiology-visualizations/" title="Code Repository In Google Code">Code</a>
        </li>

        <li>
            <a href="http://groups.google.com/group/systemsbiology-visualizations" title="Systems Biology Visualization Group">Group</a>
        </li>
    </ul>
</div>
<!-- end gc-topnav -->


<div class="g-section g-tpl-170">

<a name="gc-toc-anchor"></a>

<div class="g-unit g-first" id="gc-toc">
    <ul class="treelist tlw-nested-only tlw-processed tlw-instance-0">
        <li><h2 class="tlw-ignore">Systemsbiology.org Visualizations</h2>

            <ul>

                <li style="padding-top: 0pt; padding-bottom: 0pt;">
                    <div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control"
                                                         title=""><img
                            src="docs/cleardot.gif" alt=""
                            class="tlw-control tlw-minus"></a>

                        <h2 class="tlw-expanded">BioHeatMap</h2></div>
                    <ul style="display: block;" id="0-sub-0">
                        <li id="home_link1">
                            <a href="http://groups.google.com/group/systemsbiology-visualizations/web/visualizations-summary" title="">Project Home</a>
                        </li>

                        <li id="docs_link1">
                            <a href="http://systemsbiology-visualizations.googlegroups.com/web/bioheatmap.html" title="" class="selected">Docs</a>
                        </li>

                        <li id="faq_link1">
                            <a href="http://systemsbiology-visualizations.googlegroups.com/web/bioheatmap_examples.html" title="">Examples</a>
                        </li>

                        <li>
                            <a href="http://code.google.com/p/systemsbiology-visualizations/downloads/detail?name=bioheatmap.js" title="">Download</a>
                        </li>

                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <div class="line"></div>

</div>

<a name="gc-pagecontent-anchor"></a>

<div style="position: relative;" class="g-unit" id="gc-pagecontent">
<h1 class="page_title">Visualization: BioHeatMap</h1>


<div class="toc">
    <ol>
        <li><a href="#Overview">Overview</a>
        </li>
        <li><a href="#Example">Example</a>
        </li>
        <li><a href="#Loading">Loading</a>
        </li>
        <li><a href="#Data_Format">Data Format</a>
        </li>
        <li><a href="#Configuration_Options">Configuration Options</a>
        </li>
        <li><a href="#Methods">Methods</a>
        </li>
        <li><a href="#Events">Events</a>
        </li>
        <li><a href="#Data_Policy">Data Policy</a>
        </li>
    </ol>
</div>

<h1><a name="Overview" id="Overview"></a>Overview</h1>

<p>
    Heatmaps are a useful way to visualize matricies of data. Scientists often use green-black-red heatmaps to visualize
    gene expression data from microarrays. This visualization supports both three color heatmaps (ex: green to black to red) and
    two color heatmaps (ex: white to yellow).
</p>

<p>
    By: dburdick<br/>
    Institute for Systems Biology
</p>

<h1><a name="Example" id="Example"></a>Example</h1>

<p></p>

<div id="heatmapContainer">

</div>

<p>&gt;&gt; <a href="bioheatmap_examples.html">See more examples</a></p>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {});
    google.load("prototype", "1.6");
</script>
<script type="text/javascript" src="http://systemsbiology-visualizations.googlecode.com/svn/tags/1.0/src/main/js/load.js"></script>
<script type="text/javascript">
    systemsbiology.load("visualization", "1.0", {packages:["bioheatmap"]});
</script>

<script type="text/javascript">
    google.setOnLoadCallback(drawTable);
    function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Gene Name');
        data.addColumn('number', 'chip_XXX_XXX_600');
        data.addColumn('number', 'chip2');
        data.addColumn('number', 'chip3');
        data.addColumn('number', 'chip4');
        data.addColumn('number', 'chip5');
        data.addColumn('number', 'chip6');
        data.addRows(4);
        data.setCell(0, 0, 'ATF3');
        data.setCell(0, 1, 0);
        data.setCell(0, 2, 0.5);
        data.setCell(0, 3, 1);
        data.setCell(0, 4, 1.5);
        data.setCell(0, 5, 2);
        data.setCell(0, 6, 2.5);
        data.setCell(1, 0, 'INS');
        data.setCell(1, 1, 3);
        data.setCell(1, 2, 3.5);
        data.setCell(1, 3, 4);
        data.setCell(1, 4, 4.5);
        data.setCell(1, 5, 5);
        data.setCell(1, 6, 5.5);
        data.setCell(2, 0, 'TAP1');
        data.setCell(2, 1, 0);
        data.setCell(2, 2, null);
        data.setCell(2, 3, -1);
        data.setCell(2, 4, -1.5);
        data.setCell(2, 5, -2);
        data.setCell(2, 6, -2.5);
        data.setCell(3, 0, 'IL6');
        data.setCell(3, 1, -3);
        data.setCell(3, 2, -3.5);
        data.setCell(3, 3, -4);
        data.setCell(3, 4, -4.5);
        data.setCell(3, 5, -5);
        data.setCell(3, 6, -5.5);

        heatmap = new org.systemsbiology.visualization.BioHeatMap(document.getElementById('heatmapContainer'));
        heatmap.draw(data, {});
    }
</script>

<pre class="prettyprint">
&lt;html&gt;
  &lt;head&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      google.load(&quot;visualization&quot;, &quot;1&quot;, {});
      google.load(&quot;prototype&quot;, &quot;1.6&quot;);
    &lt;/script&gt;
    
    &lt;script type=&quot;text/javascript&quot; src=&quot;http://systemsbiology-visualizations.googlecode.com/svn/tags/1.0/src/main/js/load.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        systemsbiology.load(&quot;visualization&quot;, &quot;1.0&quot;, {packages:[&quot;bioheatmap&quot;]});
    &lt;/script&gt;

    &lt;script type=&quot;text/javascript&quot;&gt;
      google.setOnLoadCallback(drawHeatMap);
      function drawHeatMap() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Gene Name');
          data.addColumn('number', 'chip_XXX_XXX_600');
          data.addColumn('number', 'chip2');
          data.addColumn('number', 'chip3');
          data.addColumn('number', 'chip4');
          data.addColumn('number', 'chip5');
          data.addColumn('number', 'chip6');
          data.addRows(4);
          data.setCell(0, 0, 'ATF3');
          data.setCell(0, 1, 0);
          data.setCell(0, 2, 0.5);
          data.setCell(0, 3, 1);
          data.setCell(0, 4, 1.5);
          data.setCell(0, 5, 2);
          data.setCell(0, 6, 2.5);
          data.setCell(1, 0, 'INS');
          data.setCell(1, 1, 3);
          data.setCell(1, 2, 3.5);
          data.setCell(1, 3, 4);
          data.setCell(1, 4, 4.5);
          data.setCell(1, 5, 5);
          data.setCell(1, 6, 5.5);
          data.setCell(2, 0, 'TAP1');
          data.setCell(2, 1, 0);
          data.setCell(2, 2, null);
          data.setCell(2, 3, -1);
          data.setCell(2, 4, -1.5);
          data.setCell(2, 5, -2);
          data.setCell(2, 6, -2.5);
          data.setCell(3, 0, 'IL6');
          data.setCell(3, 1, -3);
          data.setCell(3, 2, -3.5);
          data.setCell(3, 3, -4);
          data.setCell(3, 4, -4.5);
          data.setCell(3, 5, -5);
          data.setCell(3, 6, -5.5);

          heatmap = new org.systemsbiology.visualization.BioHeatMap(document.getElementById('heatmapContainer'));
          heatmap.draw(data, {});
      }
    &lt;/script&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;div id=&quot;heatmapContainer&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<h1><a name="Loading" id="Loading"></a>Loading</h1>

<p>
    The script requires the google jsapi and the Prototype Javascript library (1.6 and above). The easiest way to load the script is:
</p>

<pre class="prettyprint">
    &lt;script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      google.load(&quot;visualization&quot;, &quot;1&quot;, {});
      google.load(&quot;prototype&quot;, &quot;1.6&quot;);
    &lt;/script&gt;    
    
    &lt;script type=&quot;text/javascript&quot; src=&quot;http://systemsbiology-visualizations.googlecode.com/svn/tags/1.0/src/main/js/load.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        systemsbiology.load(&quot;visualization&quot;, &quot;1.0&quot;, {packages:[&quot;bioheatmap&quot;]});
    &lt;/script&gt;
</pre>

<p>
    <b>Alternatively</b>, if you want to host the javascript file locally, you can <a href="http://code.google.com/p/systemsbiology-visualizations/downloads/detail?name=bioheatmap.js">download it here</a>. You would then simply include it in your page with:
</p>

<pre class="prettyprint">
    &lt;script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      google.load(&quot;visualization&quot;, &quot;1&quot;, {});
      google.load(&quot;prototype&quot;, &quot;1.6&quot;);
    &lt;/script&gt;
    
    &lt;script type=&quot;text/javascript&quot; src=&quot;bioheatmap.js&quot;&gt;&lt;/script&gt;
</pre>



<p>
    The visualization's class name is <code>org.systemsbiology.visualization.BioHeatMap</code>
</p>

<pre class="prettyprint">
    var heatmap = new org.systemsbiology.visualization.BioHeatMap(document.getElementById('heatmapContainer')); 
</pre>

<h1><a name="Data_Format" id="Data_Format"></a>Data Format</h1>

<p>
    This visualization supports numerical data for all columns. When the <code>useRowLabels</code> option is true (default),
    the first column may be of string type.
</p>

<h1><a name="Configuration_Options" id="Configuration_Options"></a>Configuration Options</h1>

<p>
</p>
<table>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
        <tr>
            <td>startColor</td>
            <td>Object</td>
            <td>{r: 0, <br>
                g: 255, <br>
                b: 0, <br>
                a: 1 }
            </td>
            <td>Defaults to <span style="color:#00ff00">green</span>. This is a simple object with red, green, blue and alpha attributes set.
                <br>Valid r/g/b values range from 0 to 255.
                Valid a values range from 0 to 1.
            </td>
        </tr>
        <tr>
            <td>endColor</td>
            <td>Object</td>
            <td>{r: 255, <br>
                g: 0, <br>
                b: 0, <br>
                a: 1 }
            </td>
            <td>Defaults to <span style="color:#FF0000">red</span>. This is a simple object with red, green, blue and alpha attributes set.
                <br>Valid r/g/b values range from 0 to 255.
                Valid a values range from 0 to 1.
            </td>
        </tr>
        <tr>
            <td>emptyDataColor</td>
            <td>Object</td>
            <td>{r: 100, <br>
                g: 100, <br>
                b: 100, <br>
                a: 1 }
            </td>
            <td>Defaults to <span style="color:#666666">gray</span>. This is a simple object with red, green, blue and alpha attributes set.
                <br>Valid r/g/b values range from 0 to 255.
                Valid a values range from 0 to 1.
            </td>
        </tr>
        <tr>
            <td>numberOfColors</td>
            <td>integer</td>
            <td>64</td>
            <td>The number of colors to split the data into. Minimum of 1 for two color heatmaps,
                and 2 for three color maps. Maximum of 256.
            </td>
        </tr>
        <tr>
            <td>passThroughBlack</td>
            <td>boolean</td>
            <td>true</td>
            <td>If set to true, black is set as the center color between <code>startColor</code> and <code>endColor</code>.
                When set to false, the colors range directly from <code>startColor</code> to <code>endColor</code>.
            </td>
        </tr>
        <tr>
            <td>useRowLabels</td>
            <td>boolean</td>
            <td>true</td>
            <td>If set to true, the first column will be treated as a row label and it's value printed as text.</td>
        </tr>
        <tr>
            <td>cellWidth</td>
            <td>integer</td>
            <td>15</td>
            <td>The width of each heatmap data cell.</td>
        </tr>
        <tr>
            <td>cellHeight</td>
            <td>integer</td>
            <td>15</td>
            <td>The height of each heatmap data cell.</td>
        </tr>
        <tr>
            <td>mapWidth</td>
            <td>integer</td>
            <td>&nbsp;</td>
            <td>The absolute width of the visualization area.
                When <code>mapWidth</code> and <code>mapHeight</code> are specified, the <code>cellHeight</code>
                and <code>cellWidth</code> are interpolated and set to square.
            </td>
        </tr>
        <tr>
            <td>mapHeight</td>
            <td>integer</td>
            <td>&nbsp;</td>
            <td>The absolute width of the visualization area.
                When <code>mapWidth</code> and <code>mapHeight</code> are specified, the <code>cellHeight</code>
                and <code>cellWidth</code> are interpolated and set to square.
            </td>
        </tr>
        <tr>
            <td>fontSize</td>
            <td>integer</td>
            <td>10</td>
            <td>The font height in pixels.</td>
        </tr>
        <tr>
            <td>verticalPadding</td>
            <td>integer</td>
            <td>10</td>
            <td>The number of pixels to pad the top and bottom of the visualization.
            </td>
        </tr>
        <tr>
            <td>horizontalPadding</td>
            <td>integer</td>
            <td>10</td>
            <td>The number of pixels to pad the left and right sides of the visualization.
            </td>
        </tr>
        <tr>
            <td>drawBorder</td>
            <td>boolean</td>
            <td>true</td>
            <td>If true, a single pixel border is drawn around the edges of the visualization.</td>
        </tr>
    </tbody>
</table>


<h1><a name="Methods" id="Methods"></a>Methods</h1>

<p>
</p>
<table>
    <tbody>
        <tr>
            <th>Method</th>
            <th>Return Type</th>
            <th>Description</th>
        </tr>
        <tr>
            <td><code>draw(data, options)</code></td>
            <td>none</td>
            <td>Draws the heatmap.</td>
        </tr>
        <tr>
            <td><code>getSelection()</code></td>
            <td>Array of selection elements</td>
            <td>Standard getSelection implementation. Selection elements are cells when a heatmap cell is clicked, rows
                when a row label is clicked and columns when a column label is clicked.
            </td>
        </tr>
        <tr>
            <td><code>setSelection(selection)</code></td>
            <td>none</td>
            <td>Standard setSelection implementation. Currently there are no visual changes to selected items.
            </td>
        </tr>
    </tbody>
</table>


<h1><a name="Events" id="Events"></a>Events</h1>

<p>
</p>
<table>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Properties</th>
        </tr>
        <tr>
            <td>select</td>
            <td>Standard select event</td>
            <td>None</td>
        </tr>
    </tbody>
</table>


<h1><a name="Data_Policy" id="Data_Policy"></a>Data Policy</h1>

<p>
    All code and data are processed and rendered in the browser. No data is sent to any server.
</p>


</div>
</div>
</div>
</div>
</body>
</html>